<template>
  <div class="body" v-loading="loading">
    <div class="pub-mid">
      <div class="nav-box">
        <div class="nav-col" :class="index==4?'book-nav':''" v-for="(item,index) in navList" :key="index"  @mouseenter="index!=4?moEnter($event):''" @mouseleave="index!=4?moLeave($event):''" :style="index!=4?'background-image:url('+item.bg+')':''">
          <div class="nav-title" v-if="index!=4"><span>{{item.title}}</span></div>
          <div class="nav-hover" v-if="index!=4">
            <div class="nav-hover-content" v-if="index<=6">
              <p>●「照片」<br>&nbsp;&nbsp;&nbsp;价格：800/天</p><br>
              <p>●「拍摄视频+制作视频」<br>&nbsp;&nbsp;&nbsp;价格：1200/天</p><br>
              <p>●「照片+拍摄视频+制作视频」<br>&nbsp;&nbsp;&nbsp;价格：1500/天</p><br>
            </div>
            <div class="nav-hover-content"v-if="index==7" style="text-align: center;margin-top: 20%;height: 60%">
              <p>●「根据要拍的产品款数以及 <br>
                &nbsp;&nbsp;&nbsp;拍摄的图片数量，<br>
                &nbsp;&nbsp;&nbsp; 明确自己的需求和用途，<br>
                &nbsp;&nbsp;&nbsp;我们会给出优惠的价格！</p>
            </div>
            <div class="nav-hover-content"v-if="index==8" style="text-align: center;margin-top: 30%;height: 50%">
              <p>●价格：1000 </p>
              <p>●行程：一天</p>
            </div>
            <el-row>
              <el-button type="primary" size="mini" @click="popup(index)">查看服务</el-button>
            </el-row>
          </div>
          <el-form :model="bookForm"  v-if="index==4" ref="bookForm"  label-width="100px" class="book-form" size="mini">
            <div class="nav-book-title">{{item.title}}</div>
            <el-form-item label="摄影类型：" prop="product">
              <el-select v-model="bookForm.product" placeholder="请选择">
                <el-option label="待定" value="待定"></el-option>
                <el-option label="活动会议" value="活动会议"></el-option>
                <el-option label="体育赛事" value="体育赛事"></el-option>
                <el-option label="文艺演出" value="文艺演出"></el-option>
                <el-option label="毕业典礼" value="毕业典礼"></el-option>
                <el-option label="生日宴会" value="生日宴会"></el-option>
                <el-option label="婚礼纪实" value="婚礼纪实"></el-option>
                <el-option label="产品拍摄" value="产品拍摄"></el-option>
                <el-option label="航拍" value="beijing"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="联系方式：" prop="phone">
              <el-input v-model="bookForm.phone"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="subBook">马上定制</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
    <el-dialog :title="navList[popIndex].title" class="pop-win" :visible.sync="dialogVisible">
      <img v-for="(item,index) in popImgList" v-if="index == popIndex" :src="item"  class="pop-img">
      <video class="pop-video" id="pop-video" v-if="popIndex==8" controls autoplay>
        <source src="http://v.qulang.com/video/1446c8cb-167f931c82c-0007-07d4-ce9-ad127.mp4" type="video/mp4">
      </video>
      <div class="pop-content" v-if="popIndex<=6">
        <table>
          <tr><th colspan="3">拍摄价格及服务内容（针对纪实团建活动及年会活动）  </th></tr>
          <tbody>
          <tr>
            <td class="type">一人一机位一天地面拍摄</td>
            <td class="price">报价 元/天</td>
            <td class="service">服务包括</td>
          </tr>
          <tr>
            <td class="type">照片</td>
            <td class="price">800</td>
            <td class="service">
              <div class="service-l"></div>
              <div class="service-r">
                1. 全程跟拍；<br>
                2. 实时共享；<br>
                3. 极速回片（活动结束后1个工作日处理并回片，如有精修需求请另议）；<br>
                4. 拍摄不低于200张；<br>
                5. 免费制作电子相册；<br>
                6. 免费添加logo水印；
              </div>
              </td>
          </tr>
          <tr>
            <td class="type">拍摄视频+制作视频</td>
            <td class="price">1200</td>
            <td class="service">
              <div class="service-l"></div>
              <div class="service-r">
                1. 全程跟拍；<br>
                2. 成片时长不低于2分钟；<br>
                3. 极速回片（3-5个工作日制作并回片）；<br>
                4. 免费10s小视频；<br>
                5. 免费添加片头logo；
              </div>
              </td>
          </tr>
          <tr>
            <td class="type">照片+拍摄视频+制作视频</td>
            <td class="price">1500</td>
            <td class="service">
              <div class="service-l">照片：</div>
              <div class="service-r">
                1. 全程跟拍；<br>
                2. 实时共享；<br>
                3. 极速回片（活动结束后1个工作日处理并回片，如有精修需求请另议）；<br>
                4. 拍摄不低于200张；<br>
                5. 免费制作电子相册；<br>
                6. 免费添加logo水印；
              </div>
              <div class="service-l">视频：</div>
              <div class="service-r">
                1. 全程跟拍；<br>
                2. 成片时长不低于2分钟；<br>
                3. 极速回片（3-5个工作日制作并回片）；<br>
                4. 免费10s小视频；<br>
                5. 免费添加片头logo；
              </div>
              </td>
          </tr>
          </tbody>
        </table>
        <h4>定制拍摄服务：</h4>
        <p>如果需要定制服务，那么我们也会根据企业个性化的公关活动影像要求，提供完整详细专业的拍摄方案。</p>
      </div>
      <div class="pop-content" v-if="popIndex==7">
        <h3>产品拍摄（价格及服务内容）</h3>
        <p>
          产品摄影范围：<br>
          手机数码及配件、电脑周边、服饰鞋帽、钟表首饰、礼品箱包、家用电器、家居用品、灯饰摆设、食品饮料、运动保健、乐器及配件等。<br>
          价格：<br>
          根据要拍的产品款数以及拍摄的图片数量，明确自己的需求和用途，我们会给出优惠的价格。<br>
          服务内容：<br>
          1.  拥有专业的器材设备，能满足不同的用图需求；<br>
          2. 摄影师一对一交流；<br>
          3. 专业的修图师后期修图服务；<br>
          4. 高清高质图片，更低价格，出片快。<br>
        </p>
      </div><div class="pop-content" v-if="popIndex==8">
      <table>
        <tr><th colspan="3">拍摄价格及服务内容（针对纪实团建活动及年会活动）</th></tr>
        <tbody>
        <tr>
          <td class="type">一人一机位一天地面拍摄</td>
          <td class="price">报价 元/天</td>
          <td class="service">服务包括</td>
        </tr>
        <tr>
          <td class="type">航拍</td>
          <td class="price">1500</td>
          <td class="service" style="padding: 50px 0;">
              1. 航拍集体照；<br>
              2. 创意摆拍；<br>
              3. 记录性镜头；<br>
              4. 其他镜头（具体航拍镜头根据当天活动内容定制）；<br>
          </td>
        </tr>
        </tbody>
      </table>
      </div>

    </el-dialog>
  </div>
</template>

<script>
  import Header from '~/components/Header.vue'
  import $ from 'jquery'
  import axios from '@/plugins/axios.js'

  export default {
    components: {
      Header
    },
    data(){
      return{
        loading:false,
        navList:[
          {
            bg:require('@/assets/img/photoNav_01.png'),
            title:'活动会议'
          },
          {
            bg:require('@/assets/img/photoNav_02.png'),
            title:'体育赛事'
          },
          {
            bg:require('@/assets/img/photoNav_03.png'),
            title:'文艺演出'
          },
          {
            bg:require('@/assets/img/photoNav_04.png'),
            title:'毕业典礼'
          },
          {
            bg:'',
            title:'商业摄影定制'
          },
          {
            bg:require('@/assets/img/photoNav_05.png'),
            title:'生日宴会'
          },
          {
            bg:require('@/assets/img/photoNav_06.png'),
            title:'婚礼纪实'
          },
          {
            bg:require('@/assets/img/photoNav_07.png'),
            title:'产品拍摄'
          },
          {
            bg:require('@/assets/img/photoNav_08.png'),
            title:'航拍'
          },

        ],
        DIR_POS :{
          left: {
            top: '0',
            left: '-100%'
          },
          right: {
            top: '0',
            left: '100%'
          },
          bottom: {
            top: '100%',
            left: '0'
          },
          top: {
            top: '-100%',
            left: '0'
          }
        },
        dirs:  ['top', 'right', 'bottom', 'left'],
        bookForm:{
          product:'',
          phone:'',
          frmcode:''
        },
        dialogVisible:false,
        popIndex:0,
        popImgList:[
          require('@/assets/img/photoPopup_01.jpg'),
          require('@/assets/img/photoPopup_02.jpg'),
          require('@/assets/img/photoPopup_03.jpg'),
          require('@/assets/img/photoPopup_04.jpg'),
          require('@/assets/img/photoPopup_04.jpg'),
          require('@/assets/img/photoPopup_05.jpg'),
          require('@/assets/img/photoPopup_06.jpg'),
          require('@/assets/img/photoPopup_07.jpg'),
          // require('@/assets/img/photoPopup_08.gif')
        ]
      }
    },
    mounted(){

    },
    methods:{
      moEnter(e){
        if (e.target === e.currentTarget) {
          //从绑定目标触发
          let event = e
            ,$element = $(event.srcElement)
            ,col = $element.find('.nav-hover').removeClass('trans');
          col.css(this.DIR_POS[this.dirs[this.calculate(event.srcElement,event)]]);
          col[0].offsetWidth;
          col.addClass('trans');
          col.css({left: '0', top: '0'});
          $element.find('.nav-title').css('display','none')
        }

      },
      moLeave(e){
        if (e.target === e.currentTarget) {
          let event = e
            ,$element = $(event.srcElement)
          $element.find('.nav-hover').css(this.DIR_POS[this.dirs[this.calculate(event.srcElement,event)]])
          $element.find('.nav-title').css('display','inline-block')
        }
      },
      calculate(element, e) {
          /*以浏览器可视区域的左上角建立坐标系*/

          //表示左上角和右下角及中心点坐标
          let x1, y1, x4, y4, x0, y0;

          //表示左上角和右下角的对角线斜率
          let k;

          //用getBoundingClientRect比较省事，而且它的兼容性还不错
          let rect = element.getBoundingClientRect();

          if (!rect.width) {
            rect.width = rect.right - rect.left;
          }

          if (!rect.height) {
            rect.height = rect.bottom - rect.top;
          }

          //求各个点坐标 注意y坐标应该转换为负值，因为浏览器可视区域左上角为(0,0)，整个可视区域属于第四象限
          x1 = rect.left;
          y1 = -rect.top;

          x4 = rect.left + rect.width;
          y4 = -(rect.top + rect.height);

          x0 = rect.left + rect.width / 2;
          y0 = -(rect.top + rect.height / 2);

          //矩形不够大，不考虑
          if (Math.abs(x1 - x4) < 0.0001) return 4;

          //计算对角线斜率
          k = (y1 - y4) / (x1 - x4);

          let range = [k, -k];

          //表示鼠标当前位置的点坐标
          let x, y;

          x = e.clientX;
          y = -e.clientY;

          //表示鼠标当前位置的点与元素中心点连线的斜率
          let kk;

          kk = (y - y0) / (x - x0);

          //如果斜率在range范围内，则鼠标是从左右方向移入移出的
          if (isFinite(kk) && range[0] < kk && kk < range[1]) {
            //根据x与x0判断左右
            return x > x0 ? 1 : 3;
          } else {
            //根据y与y0判断上下
            return y > y0 ? 0 : 2;
          }
      },
      popup(index){
        this.dialogVisible = true
        this.popIndex = index
      },
      subBook(){
        if(this.formVerify()){
          this.loading = true
          this.$axios.post('/api/?method=fromcode&action=code&acttype=phone',{}).then((response)=>{
            this.bookForm.frmcode = response.content[0]
            this.$axios.post('/api/?method=video&action=ajax_do_add&acttype=phone',this.bookForm).then((response)=>{
              this.loading = false
              if(response.content.status == 1) {
                this.$message(
                {
                  message: '感谢您的提交，稍后会有团建定制师联系您。',
                    type: 'success'
                })
              }else {
                this.$message.error('提交失败，请稍后再试')
              }

            })
          }).catch((err)=>{
            console.log(err)
          })
        }
      },

      formVerify() {
        if(!this.bookForm.product){
          this.$message.error('请选择定制类型');
          return false;
        }
        if(!this.bookForm.phone){
          this.$message.error('请填写联系方式');
          return false;
        }
        if(!(/^1[34578]\d{9}$/.test(this.bookForm.phone))){
          this.$message.error('请正确填写联系方式');
          return false;
        }
        return true;
      }
    }
  }
</script>

<style>
  .body {
    width: 100%;
    background: #fafafa url("../assets/img/bodybg.png");
  }
  .body a:hover{
    color:#3ca6f4;
  }
  .nav-box{
    width: 100%;
    padding-top: 20px;
  }
  .nav-box>.nav-col{
    display: inline-block;
    width: 390px;
    height:280px;
    background-size: 105% 100%;
    margin-right: 10px;
    margin-bottom: 10px;
    border-radius: 10px;
    overflow: hidden;
    position: relative;
  }
  .nav-box>.book-nav{
    background: white;
  }
  .nav-box>.nav-col>img{
    width: 100%;
  }
  .nav-col>.nav-title,.nav-col>.nav-hover{
    height: 100%;
    width: 100%;
    text-align: center;
  }
  .nav-col>.nav-title>span{
    display: inline-block;
    background: white;
    padding: 2px 5px 2px 13px;
    margin-top: 140px;
    border-radius: 12px;
    letter-spacing:8px;
    font-weight: bold;
    min-width: 100px;
  }
  .nav-col>.nav-hover{
    position: absolute;
    top: -100%;
    left: -100%;
    background: rgba(0,0,0,.5);
    text-align: left;
    color: #fff;
    padding: 30px 50px;
  }
  .nav-col>.nav-hover.trans{
    transition: all .2s;
    backface-visibility: hidden;
  }
  .nav-col>.nav-hover .nav-hover-content{
    height: 80%;
  }
  .nav-col>.nav-hover .el-row{
    height: 20%;
    line-height: 20%;
    text-align: center;
  }

  .nav-col.book-nav{
    padding: 30px 50px;
    transition: all .2s;
    z-index: 9;
  }
  .nav-col.book-nav:hover{
     transform:scale(1.2);
   }
  .nav-col.book-nav .nav-book-title{
    height: 50px;
    line-height: 50px;
    font-size: 19px;
    text-align: center;
  }

  .pop-win .pop-img{
    width: 100%;
  }
  .pop-win .pop-video{
    width: 100%;
  }
  .pop-win h3{
    font-size: 18px;
  }
  .pop-win h3,.pop-win p{
    font-family: SimHei;
    color: #000;
  }
  .pop-content table{
    color:#060606;
    text-align: center;
    width: 100%;
  }
  .pop-content table th{
    background: #bfbfbf;
  }
  .pop-content table td{
    background: #eeeeee;
    border: 1px solid #fff;
  }
  .pop-content table td.type{
    width: 28%;
  }
  .pop-content table td.price{
    width: 17%;
  }
  .pop-content table td.service{
    width: 55%;
    box-sizing: border-box;
    text-align: center;
  }
  .pop-content table td.service .service-l{
    float: left;
    width: 100px;
    min-height: 100px;
    text-align: right;
    line-height: 100px;
  }
  .pop-content table td.service .service-r{
    overflow: hidden;
    width: 80%;
    text-align: left;
  }
  .pop-content h4{
    font-size: 18px;
    color:#000;
  }
  .pop-content p{
    color:#000;
  }
  /*重置elementui部分样式*/
  .el-select.el-select--mini{
    width: 100%;
  }
  .el-button--primary{
    background: #009ee2;
    border-color: #009ee2;
  }
  .el-dialog__header{
    padding: 10px;
    padding-left: 20px;
  }
  .el-dialog__header span{
    font-size: 16px;
  }
  .el-dialog__headerbtn{
    top: 10px;
  }
  .el-dialog__body{
    padding: 10px 20px;
  }
</style>
